<template>
  <div class="main">
    <div class="top">
      <div class="header">
        <el-avatar :size="100" src="https://empty" @error="errorHandler">
          <img :src="$store.state.user.headerImg"/>
        </el-avatar>
      </div>
      <div class="content">
        <p>
          <strong>{{ $store.state.user.userInfo.name }}</strong>
        </p>
        <p>微信:&emsp;xnifms</p>
        <div>手机:&emsp;18000000000&emsp; 
          
          <label for="hImg">

            <span style="color:#7030a0;cursor:pointer">修改头像</span>
          </label>
          <input  type="file" id="hImg" @change="fileChange" placeholder="修改头像">
        </div>
        <div></div>
      </div>
    </div>
    <el-divider></el-divider>
  </div>
</template>

<script>
import { GetImg } from "@/api/user";
export default {
  methods: {
    data() {
      return {
        fileList: {},
      };
    },
    errorHandler() {
      return true;
    },
    fileChange(e){
      console.log(e.target.files[0]);
        this.fileList = e.target.files[0]
        var formData = new FormData();
        formData.append('file',this.fileList)
        // UploadImg(formData)
        // .then(res=>{
        //   console.log(res.data);
        // })
        this.$store.dispatch('uploadImg',formData)
    },
  btn(){
    GetImg()
    .then(res=>{
      console.log(res.data);
    })
  }
  },
  created() {
    console.log(this.$store.state.user.userInfo);
    this.$store.dispatch('getImg')
  },
};
</script>

<style scoped>
.main {
  background-color: #fff;
  padding: 20px 50px;
}
.main .top {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #fff;
}

img {
  border-radius: 50%;
  width: 60px;
  height: 60px;
}
.main .top .content {
  margin-left: 24px;
  font-size: 16px;
}
#hImg{
  opacity: 0;
}
</style>